<div class="left">
  <div class="windows-menu">
    <button class="icon-button" mat-menu-item [matMenuTriggerFor]="window_menu"><i class="moon-More"></i></button>
    <mat-menu #window_menu>
      <button mat-menu-item (click)="appService.about();">
        <span>About</span>
      </button>
      <button mat-menu-item (click)="appService.quit();">
        <span>Quit</span>
      </button>
    </mat-menu>
  </div>

  <button class="icon-button line-end" (click)="toggleCompactMode();"><i class="moon-Sidebar"></i></button>
</div>
<div class="right {{filterExtended ? 'extended' : ''}}">
  <form [formGroup]="filterForm">

    <div class="main-bar">
      <button class="icon-button show-in-taskbar-only" (click)="false;" matTooltip="Sync all Integrations"><i class="moon-Refresh"></i></button>

      <button class="icon-button line-start hide-in-taskbar" (click)="showCreateDialog();" matTooltip="Add a new Session"
              [disabled]="isLeappTeamWorkspace" [ngClass]="isLeappTeamWorkspace ? 'disabled-add-session':'' "><i class="moon-Add"></i></button>

      <button class="icon-button hide-in-taskbar filtering {{filterExtended ? 'toggled-filter' : ''}}" (click)="toggleFilters();"
              matTooltip="Filter the Session list"><i class="moon-Filter"></i></button>

      <div class="form-control-input-icon">
        <input spellcheck="false" formControlName="searchFilter" type="text" class="form-control search-bar" placeholder="Search session"/>
        <i class="moon-Search"></i>
      </div>

      <button class="icon-button hide-in-taskbar" (click)="syncAll();" matTooltip="Sync all Integrations"><i class="moon-Refresh"></i></button>

      <div class="line-end">
        <!--        <button class="icon-button top-right-option-button" (click)="showOptionDialog();" matTooltip="Show Leapp Options"><i-->
        <!--          class="moon-Settings"></i></button>-->
        <button class="icon-button top-right-option-button margin-right-fix notification" [matMenuTriggerFor]="notification_menu"
                matTooltip="Show Leapp Notifications">
          <img
            class="{{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"
            src="assets/images/notifications.svg" alt="notifications button" title=""/>
          <span class="notification-dot" *ngIf="isNotificationPending"></span>
        </button>
        <mat-menu #notification_menu>
          <button class="notification-menu-item" mat-menu-item (click)="goToWhatsNew();">
            <img
              class="icon-not-menu {{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"
              src="assets/images/books.svg"/>&nbsp;<span>What's new</span>
          </button>

          <button class="notification-menu-item" mat-menu-item (click)="goToGettingStarted();">
            <i
              class="icon-not-menu moon-Check {{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"></i>&nbsp;<span>Getting started</span>
          </button>

          <button class="notification-menu-item" mat-menu-item (click)="goToJoinTheCommunity();">
            <img
              class="icon-not-menu {{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"
              src="assets/images/slack.svg"/>
            &nbsp;<span>Join the community</span>
          </button>

          <button class="notification-menu-item" mat-menu-item (click)="openAnIssue();" [disabled]="!isIssueButtonEnabled">
            <img
              class="icon-not-menu {{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"
              src="assets/images/bug.svg"/>
            &nbsp;<span>Open an Issue</span>
          </button>

          <button class="notification-menu-item" mat-menu-item (click)="requestAFeature();" [disabled]="!isIssueButtonEnabled">
            <img
              class="icon-not-menu {{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"
              src="assets/images/lightbulb.svg"/>
            &nbsp;<span>Request a Feature</span>
          </button>

          <div *ngIf="notifications.length > 0" class="divider"></div>

          <ng-container *ngFor="let notification of notifications">
            <button class="notification-menu-item" mat-menu-item (click)="notification.uuid === 'noovolari-1000' ? openNoovolariModal(notification) : openInfoModal(notification);" [disabled]="!isIssueButtonEnabled">
              <img
                class="icon-not-menu {{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? 'invert' : ''}}"
                src="assets/images/{{notification.read ? 'read-notification' : notification.icon ?? 'unread-notification'}}.svg"
                alt="{{notification.title}}"/>
              <span class="notification-dot" *ngIf="!notification.read"></span>
              &nbsp;<span [ngClass]="!notification.read ? 'unread-text' : ''">{{notification.title}}</span>
            </button>
          </ng-container>

        </mat-menu>


        <button class="icon-button top-right-option-button" (click)="showOptionDialog();"
                matTooltip="Show Leapp Options"><i class="moon-Settings"></i></button>
      </div>

      <div class="window-buttons">
        <span class="minimize" (click)="appNativeService.currentWindow.minimize()"><img
          src="assets/images/windows_minimize{{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? '_dark' : ''}}.png"
          alt="" title=""></span>
        <span class="maximize {{compactMode ? 'disabled' : ''}}" (click)="windowMaximizeAction();"><img
          src="assets/images/windows_maximize{{windowButtonDetectTheme()}}.png" alt="" title=""></span>
        <span class="quit" (click)="appNativeService.currentWindow.hide()"><img
          src="assets/images/windows_close{{optionsService.colorTheme === eConstants.darkTheme || (optionsService.colorTheme === eConstants.systemDefaultTheme && appService.isDarkMode()) ? '_dark' : ''}}.png"
          alt="" title=""></span>
      </div>
    </div>

    <div class="tag-filters">
      <span class="left-shadow" *ngIf="overflowed"></span>
      <span class="right-shadow" *ngIf="overflowed"></span>
      <div class="tag-filters-area" #parent>

        <div #child>
          <input formControlName="dateFilter" type="checkbox" class="hidden"/>
          <button class="toggle-button filter-button {{filterForm.get('dateFilter').value ? 'toggled' : ''}}" (click)="toggleDateFilter();"><i
            class="moon-Order"></i> Order by date
          </button>

          <app-filter-menu [control]="'providerFilter'" [data]="providers" [icon]="'moon-Cloud'" [name]="'Providers'"
                           [form]="filterForm"></app-filter-menu>
          <app-filter-menu [control]="'profileFilter'" [data]="profiles" [icon]="'moon-User'" [name]="'Profile'" [form]="filterForm"
                           [searchable]="true"></app-filter-menu>
          <app-filter-menu [control]="'regionFilter'" [data]="regions" [icon]="'moon-Region'" [name]="'Region'" [form]="filterForm"
                           [searchable]="true"></app-filter-menu>
          <app-filter-menu [control]="'typeFilter'" [data]="types" [icon]="'moon-Bookmark'" [name]="'Type'" [form]="filterForm"
                           [categories]="['Amazon AWS', 'Microsoft Azure']"></app-filter-menu>
        </div>
      </div>

      <a class="save-segments" (click)="openSaveSegmentDialog();" *ngIf="checkFormIsDirty();">Save{{compactMode ? '' : ' Segments'}}</a>
    </div>

  </form>

</div>
<div class="clear"></div>
